import React, { FC, useState } from 'react'
import {
    Form,
    Input,
  } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { reg } from '../utils/validate'

const PassInput: FC<{
label?:string,
name?:string,
placeholder?:string,
rules?:any,
dependencies?:any
}> = ({
label="密码",
name="password",
placeholder="请输入密码",
rules=[],
dependencies
}) => {
    const [visible,setvisible] = useState<boolean>(false)
    
        return (
            <div>
                <Form.Item
                    label={label}
                    name={name}
                    rules={[
                        { required: true, message: '密码不能为空' },
                        { pattern: reg.pwd, message: '请输入6-16的数字字母组合的密码' },
                        ...rules
                    ]}
                    hasFeedback
                    dependencies={[dependencies]}
                    extra = {
                        <div>
                            {
                                !visible ? (<EyeInvisibleOutline fontSize={18} onClick={()=>setvisible(true)}/>) :
                                (<EyeOutline fontSize={18} onClick={()=>setvisible(false)}/>)
                            }
                        </div>}
                    >
                        <Input
                            placeholder={placeholder}
                            autoComplete='true'
                            clearable
                            type={visible?"text":"password"}
                        />
                    </Form.Item>
            </div>
        )
    }

export default PassInput